<template>
  <el-breadcrumb separator="/" class="app-breadcrumb">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
        <span
          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
          class="no-redirect"
          >{{ item.meta.title }}</span
        >
        <router-link v-else :to="item.redirect || item.path">{{ item.meta.title }}</router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { RouteLocationMatched } from 'vue-router'

export default defineComponent({
  data() {
    return {
      levelList: [] as Pick<RouteLocationMatched, 'meta' | 'path' | 'redirect'>[],
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    },
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      const matched: any = this.$route.matched.filter((item) => item.meta && item.meta.title)
      // const first = matched[0]

      // if (!this.isDashboard(first)) {
      //   const nav: any = {
      //     path: '/admin/generalview',
      //     meta: {
      //       title: '管理'
      //     }
      //   }
      //   matched = [nav].concat(matched)
      //   // matched = [].concat(matched)
      // }

      this.levelList = matched.filter(
        (item: any) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      )
    },
    isDashboard(meta: any) {
      const name = meta && meta.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Home'.toLocaleLowerCase()
    },
  },
})
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  height: 60px;
  font-size: 16px;
  line-height: 60px;

  .no-redirect {
    color: var(--color-1);
    cursor: text;
  }
}

:deep() {
  .el-breadcrumb {
    &__item {
      .el-breadcrumb__inner {
        a {
          color: var(--color-2);
        }
      }

      &:last-child {
        .el-breadcrumb__inner {
          color: var(--color-1);
        }
      }
    }

    &__separator {
      margin: 0 10px;
      color: var(--color-2);
    }
  }
}
</style>
